import React, { useState, useEffect } from 'react';
import MyIconfont from '../MyIconfont';
import { Menu } from 'antd';
import '../../index.scss';

import { useMatches } from 'react-router-dom';

export default function LeftMenu() {
    const menuList = [
        { key: "/home", label: "首页", icon: <MyIconfont font='icon-home' color='#909399' /> },
        {
            key: "/account1",
            label: "账号管理",
            icon: <MyIconfont font='icon-account' color='#909399' />,
            children: [
                { key: "/account", label: "账号列表" },
                { key: "/account/add", label: "添加账号" },
                { key: "/account/center", label: "个人中心" },
                { key: "/account/modify", label: "修改密码" },
            ],
        },
        {
            key: "/goods1",
            label: "商品管理",
            icon: <MyIconfont font='icon-goods' color='#909399' />,
            children: [
                { key: "/goods", label: "商品列表" },
                { key: "/goods/add", label: "商品添加" },
                { key: "/goods/type", label: "商品分类" },
            ],
        },
        {
            key: "/order",
            label: "订单管理",
            icon: <MyIconfont font='icon-order' color='#909399' />,
        },
        {
            key: "/shop",
            label: "店铺管理",
            icon: <MyIconfont font='icon-shop' color='#909399' />,
        },
        {
            key: "/sale1",
            label: "统计数据",
            icon: <MyIconfont font='icon-total' color='#909399' />,
            children: [
                { key: "/sale", label: "商品统计" },
                { key: "/sale/order", label: "订单统计" },
            ],
        },
    ];

    const toPage = (menu) => {
        location.href = '/#' + menu.key;
    };
    const [openKey, setOpenKey] = useState(['/account1'])
    const [selectKey, setSelectKey] = useState(['/home'])
    const openChage = (data) => {
        setOpenKey(data)
    }


    const matches = useMatches();

    useEffect(() => {

        let key = matches[0].data.key
        setOpenKey([key])
        let currentKey = matches[matches.length - 1].data.key
        console.log(currentKey);
        setSelectKey(currentKey)
    }, [matches])

    return (
        <>
            <Menu
                onOpenChange={openChage}
                openKeys={openKey}
                selectedKeys={selectKey}
                onClick={toPage}
                className="menu-items"
                defaultSelectedKeys={['/home']}
                mode="inline"
                items={menuList}
            />
        </>
    );
}






// function getItem(label, key, icon, children) {
//     return {
//         key,
//         icon,
//         children,
//         label,
//     };
// }

// const items = [
//     getItem('后台首页', '/home', <MailOutlined />),
//     getItem('订单管理', '/order', <MailOutlined />),
//     getItem('商品管理', '/goods', <MailOutlined />, [
//         getItem('商品列表', '/goods/list'),
//         getItem('商品添加', '/goods/add'),
//         getItem('商品分类', '/goods/modify'),
//     ]),
//     getItem('店铺管理', '/shop', <MailOutlined />),
//     getItem('账号管理', '/account', <MailOutlined />, [
//         getItem('账号列表', '/account/list'),
//         getItem('添加账号', '/account/add'),
//         getItem('个人中心', '/account/center'),
//         getItem('修改密码', '/account/modify'),
//     ]),
//     getItem('销售统计', '/sale', <MailOutlined />, [
//         getItem('商品统计', '/sale/goods'),
//         getItem('订单统计', '/sale/order'),
//     ]),
// ];
